<template>
  <el-table :data="tableData" style="width: 100%;height:calc(100vh - 600px)">
    <el-table-column v-for="col in columns" :key="col.prop" :label="col.label" :prop="col.prop">
      <template #default="{ row, $index }">
        <div v-if="isEditing($index, col.prop)">
          <!-- input 编辑 -->
          <el-input v-if="col.type === 'input'" v-model="editCache[col.prop]" size="small" @blur="saveEdit($index, col.prop)" @keyup.enter="saveEdit($index, col.prop)" ref="inputRef" />
          <el-input v-if="col.type === 'number'" v-model="editCache[col.prop]" type="number" size="small" @blur="saveEdit($index, col.prop)" @keyup.enter="saveEdit($index, col.prop)" ref="inputRef" />
          <!-- datetime 编辑 -->
          <el-date-picker v-if="col.type === 'datetime'" v-model="editCache[col.prop]" type="datetime" @blur="saveEdit($index, col.prop)" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
          <!-- select 编辑 -->
          <el-select v-else-if="col.type === 'select'" v-model="editCache[col.prop]" size="small" @change="saveEdit($index, col.prop)" @blur="saveEdit($index, col.prop)" ref="selectRef">
            <el-option v-for="option in col.options" :key="option.value" :label="option.label" :value="option.value" />
          </el-select>
        </div>
        <div v-else @click="startEdit($index, col.prop, row[col.prop])" style="cursor: pointer; min-height: 32px; line-height: 32px;">
          <!-- 显示中文label，如果是select类型，根据value找到对应label -->
          <template v-if="col.type === 'select'">
            {{ getLabelByValue(col.options, row[col.prop]) }}
          </template>
          <template v-else>
            {{ row[col.prop] }}
          </template>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <button @click="BaocunFn">保存</button>
</template>

<script setup>
import { reactive, ref, nextTick } from 'vue'

const tableData = reactive([
  { id: 1, name: '张三', count: 0, status: '1', datetime: '' },
  { id: 2, name: '李四', count: 0, status: '2', datetime: '' },
  { id: 2, name: '李四', count: 0, status: '2', datetime: '' },
  { id: 2, name: '李四', count: 0, status: '2', datetime: '' },
  { id: 2, name: '李四', count: 0, status: '2', datetime: '' },
  { id: 2, name: '李四', count: 0, status: '2', datetime: '' },
  { id: 2, name: '李四', count: 0, status: '2', datetime: '' },
  { id: 2, name: '李四', count: 0, status: '2', datetime: '' },
  { id: 2, name: '李四', count: 0, status: '2', datetime: '' },
  { id: 2, name: '李四', count: 0, status: '2', datetime: '' },
  { id: 2, name: '李四', count: 0, status: '2', datetime: '' },
  { id: 2, name: '李四', count: 0, status: '2', datetime: '' },
  { id: 2, name: '李四', count: 0, status: '2', datetime: '' },
  { id: 2, name: '李四', count: 0, status: '2', datetime: '' }
])

const columns = [
  { label: '姓名', prop: 'name', type: 'input' },
  { label: '日期', prop: 'dataTime', type: 'datetime' },
  { label: '计数', prop: 'count', type: 'number' },
  {
    label: '状态',
    prop: 'status',
    type: 'select',
    options: [
      { label: '启用', value: '1' },
      { label: '禁用', value: '2' }
    ]
  }
]

const editingCell = reactive({ rowIndex: null, prop: null })
const editCache = reactive({})

// 判断是否编辑状态
function isEditing(rowIndex, prop) {
  return editingCell.rowIndex === rowIndex && editingCell.prop === prop
}

// 开始编辑，初始化缓存
function startEdit(rowIndex, prop, value) {
  editingCell.rowIndex = rowIndex
  editingCell.prop = prop
  editCache[prop] = value

  // 让输入框或选择框自动聚焦
  nextTick(() => {
    if (columns.find(c => c.prop === prop)?.type === 'input') {
      const input = document.querySelector('input.el-input__inner')
      input && input.focus()
    } else if (columns.find(c => c.prop === prop)?.type === 'select') {
      // select自动聚焦比较复杂，Element Plus默认不支持直接focus
      // 这里可以考虑用弹出下拉框的方式，或者用户手动选择
    }
  })
}

// 保存编辑内容
function saveEdit(rowIndex, prop) {
  if (editingCell.rowIndex === rowIndex && editingCell.prop === prop) {
    tableData[rowIndex][prop] = editCache[prop]
    editingCell.rowIndex = null
    editingCell.prop = null
  }
}

// 根据value获取对应label（用于select显示中文）
function getLabelByValue(options, value) {
  const option = options.find(opt => opt.value === value)
  return option ? option.label : value
}

const BaocunFn = () => {
  console.log('测试数据打印', tableData)
}
</script>
